<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="pager">
    <!-- 表单分页信息和选页按钮 -->
    <div class="row" style="margin-top: 10px;padding:0 20px;" th:if="${pageInfo!=null}">
        <div class="col-md-4 col-sm-4" style="margin-right:0;padding-right: 0">
            <div class="info">显示第
                <span th:text="${pageInfo.startRow}">pageNum</span>
                 至
                <span th:text="${pageInfo.endRow}"></span>
                项记录，共<span th:text="${pageInfo.total}">total</span> 项
            </div>
        </div>

        <div class="col-md-3" th:if="${pageInfo.pages>0 && pageInfo.pages<200}">
            <div class="info">总共<span th:text="${pageInfo.pages}"></span>页，当前显示
                <select id="currpage" class="input-sm" data-rel="chosen" data-live-search="true" th:onchange="|selectPage()|">
                    <option th:each="page:${#numbers.sequence(1, pageInfo.pages)}" th:value="${page}" th:selected="${pageInfo.pageNum==page}" th:text="'第'+${page}+'页'">第1页</option>
                </select>
            </div>
        </div>
        <div class="col-md-3" th:if="${pageInfo.pages>=200}">
            <div class="info input-group">总共<span th:text="${pageInfo.pages}"></span>页，当前显示第
                <input class="input-xs" style="width: 50px;padding: 0 0;text-align: center;" id="currpage" th:value="${pageInfo.pageNum}">
                <button class="btn btn-xs" style="border-radius: 0px 3px 3px 0px;height: 24px;vertical-align: top;" th:onclick="|selectPage()|">GO</button>页
            </div>
        </div>

        <div class="col-md-5 col-sm-5" style="margin:0;padding-right: 10px">
            <ul class="pager pager-sm" style="float: right;margin-top: 0;margin-bottom: 5px;">
                <li th:class="${pageInfo.isFirstPage}?'disabled':'active'">
                    <a href="javascript:void(0);" th:onclick="|goToPage(this,1)|">首页</a>
                </li>
                <li th:class="${pageInfo.hasPreviousPage}?'':'disabled'">
                    <a href="javascript:void(0);" th:onclick="|goToPage(this,${pageInfo.prePage})|">上一页</a>
                </li>
                <li th:class="${pageInfo.hasNextPage}?'':'disabled'">
                    <a href="javascript:" th:onclick="|goToPage(this,${pageInfo.nextPage})|">下一页</a>
                </li>
                <li th:if="${pageInfo.isLastPage}" th:class="disabled">
                    <a href="javascript:void(0);">最后一页</a>
                </li>
                <li th:unless="${pageInfo.isLastPage}" th:class="active">
                    <a href="javascript:void(0);" th:onclick="|goToPage(this,${pageInfo.pages})|">最后一页</a>
                </li>
            </ul>
        </div>
    </div>
    <script>
        function goToPage(obj, pageNum) {
            if(!$(obj).parent().hasClass('disabled')){
                if($("#pageNum").length == 0){
                    $('form').append("<input type=\"hidden\" value=\"" + pageNum + "\" name=\"pageNum\" id=\"pageNum\">");
                }else{
                    $("#pageNum").val(pageNum);
                }
                $('form').submit();
            }
        }
        function selectPage() {
            let pageNum=$('#currpage').val();
            if($("#pageNum").length == 0){
                $('form').append("<input type=\"hidden\" value=\"" + pageNum + "\" name=\"pageNum\" id=\"pageNum\">");
            }else{
                $("#pageNum").val(pageNum);
            }
            $('form').submit();
        }
    </script>
</div>
</body>
</html>